<template>
  <div class="m-dashboard">
    <div class="g-container">
      <div class="g-content">
        <x-form ref="formRef" v-model:model="form" inline label-placement="left">
          <n-form-item label="员工姓名">
            <n-input v-model:value="form.operatorName" placeholder="请输入员工姓名" clearable />
          </n-form-item>
          <n-form-item label="手机号">
            <n-input v-model:value="form.operatorMobile" placeholder="请输入联系人手机号" clearable />
          </n-form-item>
          <n-form-item label="账户状态">
            <n-select
              v-model:value="form.operatorStatus"
              placeholder="请选择账户状态"
              :options="accountStatusList"
              clearable
            />
          </n-form-item>
          <x-button type="primary" @click="handleSubmit">查询</x-button>
          <x-button @click="handleRefresh">重置</x-button>
        </x-form>
      </div>
      <div class="g-content">
        <div>
          <x-data-table
            ref="tableRef"
            v-model:immediate="immediate"
            :params="paginationParams"
            :columns="columns"
            :row-key="(row) => row.id"
            row-class-name="text-sm"
            max-height="infinite"
          />
        </div>
      </div>
    </div>
    <AccountEdit v-if="modalAdd.show" :modal-data="modalAdd" @success="handleRefresh" />
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, h } from 'vue'
  import { XForm, XButton, XDataTable } from '@/components'
  import { NFormItem, NSelect, NInput, NSpace } from 'naive-ui'
  import AccountEdit from '@/views/system/components/AccountEdit.vue'
  import { operatorList } from '@/api/system'
  const formRef = ref(null)
  const form = ref({
    operatorStatus: null,
    operatorName: null,
    operatorMobile: null
  })
  const modalAdd = ref({
    show: false,
    row: null
  })
  const accountStatusList = ref([
    { label: '启用', value: 1 },
    { label: '冻结', value: 0 }
  ])
  const immediate = ref(true)
  const paginationParams = computed(() => {
    return {
      actions: 'system/operatorList',
      data: {
        ...form.value
      }
    }
  })
  const columns = ref([
    {
      title: '员工姓名',
      key: 'operatorName',
      width: 120
    },
    {
      title: '手机号',
      key: 'operatorMobile',
      width: 120
    },
    {
      title: '账户状态',
      key: 'operatorStatus',
      width: 120,
      render(row: any) {
        return row.operatorStatus === 1 ? '启用' : '冻结'
      }
    },
    {
      title: '操作',
      key: 'action',
      width: 120,
      render(row: any) {
        return h(NSpace, () => [
          h(
            XButton,
            {
              type: 'primary',
              text: true,
              onClick: () => handleEdit(row)
            },
            () => '编辑'
          )
        ])
      }
    }
  ])

  const handleEdit = (row: any) => {
    console.log('编辑', row)
    modalAdd.value.row = row
    modalAdd.value.show = true
  }

  const handleSubmit = () => {
    immediate.value = true
  }
  const handleRefresh = () => {
    formRef.value.resetFields()
    handleSubmit()
  }
</script>

<style lang="scss" scoped></style>
